
import { Button, List } from 'antd';
import ICapability from 'components/capability/interfaces/ICapability';
import { ambientLight } from './capabilitys/ambientLight';
import { directionalLight } from './capabilitys/directionalLight';
import { spotLight } from './capabilitys/spotLight';
import { pointLight } from './capabilitys/pointLight';
import { rectAreaLight } from './capabilitys/rectAreaLight';
import styles from './index.module.less';

/** 灯光管理 */
export default function LightingManagement() {
    return (
        <div className={styles.lightingManagement} >
            <List
                className={styles.list}
                itemLayout="horizontal"
                dataSource={dataSource}
                renderItem={item => <ListItem item={item} />}
            />
        </div>
    )
}

function ListItem(props: { item: ICapability }) {

    const { item } = props;

    const expand = item.useExpand(undefined, 0);

    return (
        <List.Item key={item.id} actions={[<Button type='text' onClick={expand.onClick} >添加</Button>]} >
            <List.Item.Meta description={item.title} />
        </List.Item>
    )
}

const dataSource = [
    ambientLight, //       环境光
    spotLight, //          聚光灯
    directionalLight, //   平行光 
    pointLight, //         点光源
    rectAreaLight, //      平面光
]

